<!-- 商品录入 -->
<template>
  <div>
    <div class="title">
        <span>商品信息</span>
    </div>

    <div class="box">
     <div class="basicBox">
            <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="160px" class="demo-ruleForm">
                <!-- <el-form-item label="所属角色" prop="industry1">
                    <el-select class="width100"  v-model="ruleForm.role" placeholder="所属角色">
                        <el-option keys="3" label="商户" value="1"></el-option>
                        <el-option keys="4" label="门店" value="2"></el-option>
                    </el-select>
                </el-form-item> -->
                <!-- <el-form-item  label="商户名称:" prop="agent1Id">
                    <el-autocomplete
                        class="service width100"
                        v-model.trim="ruleForm.merchantname"
                        :fetch-suggestions="querySearch"
                        placeholder="商户名称"
                        @select="serviceid"
                    ></el-autocomplete>
                </el-form-item> -->
                <el-form-item label="商品分类" prop="industry1">
                    <el-select class="width100"  v-model="ruleForm.type" placeholder="商品分类" @change='goodsType' :disabled="state">
                        <el-option v-for="(item,index) in goodstypearr" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="品牌型号" prop="pinpai">
                     <el-select class="width100"  v-model="ruleForm.brand" placeholder="品牌" @change='goodsbrand' :disabled="state">
                        <el-option v-for="(item,index) in brandarr" :key="index" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                    
                </el-form-item>
                 <el-form-item  prop="xinghao">
                 <el-select class="width100"  v-model="ruleForm.model" placeholder="型号" :disabled="state">
                        <el-option v-for="(item,index) in modelarr" :key="index" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                 </el-form-item>
                <el-form-item label="商品名称" prop="name"><el-input placeholder="商品名称" v-model.trim="ruleForm.name"></el-input></el-form-item>
                <el-form-item class="photo width100" label="产品缩略图">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOutside"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="ruleForm.iconUrl"
                        :src="ruleForm.iconUrl"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus ç-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item class="width100" label="产品轮播图">
                    <el-upload
                        list-type="picture"
                        :action="upload"
                        :headers="token"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :on-success="slideshow"
                        :before-upload="beforeUpload"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                 <!-- <el-form-item label="扣款次数">
                    <el-checkbox-group size='medium' class="width100" v-model="ruleForm.time">
                        <el-checkbox-button  label="1天" name="type"></el-checkbox-button>
                        <el-checkbox-button label="7天" name="type"></el-checkbox-button>
                        <el-checkbox-button label="15天" name="type"></el-checkbox-button>
                        <el-checkbox-button label="30天" name="type"></el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item> -->
                <el-form-item label="商品原价" prop="describe"><el-input class="width90" placeholder="商品原价" v-model.trim="ruleForm.orgPrice"></el-input>元</el-form-item>
                <el-form-item label="租金" prop="describe"><el-input class="width90" placeholder="租金" v-model.trim="ruleForm.rental"></el-input>元/天</el-form-item>
                <el-form-item label="押金" prop="describe"><el-input class="width90" placeholder="押金" v-model.trim="ruleForm.deposit"></el-input>元/天</el-form-item>
                <el-form-item label="库存" prop="describe"><el-input class="width90" placeholder="库存" v-model.trim="ruleForm.stock"></el-input></el-form-item>
                <!-- <el-form-item label="租期">
                    <el-checkbox-group size='medium' class="width100" v-model="ruleForm.date">
                        <el-checkbox-button  label="30天" name="type"></el-checkbox-button>
                        <el-checkbox-button label="90天" name="type"></el-checkbox-button>
                        <el-checkbox-button label="180天" name="type"></el-checkbox-button>
                        <el-checkbox-button label="365天" name="type"></el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item> -->
                <el-form-item><el-button type="primary" @click="basic('ruleForm')">提交</el-button></el-form-item>
            </el-form>
        </div>
        </div>
    </div>
</template>

<script>

import {goodsCategorylist, goodssave,goodsget,goodsupdate} from "@/api/api";
export default {
  data () {
    return {
        userinfo:'',
        ruleForm:{
            merchantname:'',
            type:'',
            name:'',
            describe:'',
            iconUrl:'',
            time:[],
            date:[],
            brand:'',
            model:'',
            orgPrice:'',
            picUrlList:'',
            stock:'',
            deposit:'',
            rental:''
        },
        token: { token: sessionStorage.getItem("token") },
        upload:  this.$store.state.url +"/product/aliRent/upload/",
        goodstypearr:[],
        brandarr:[],
        modelarr:[],
        fileList:[],
        state:false,
        goodsid:''
    };
  },

 created(){
     let that = this
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
     goodsCategorylist({
        merchantId : that.userinfo.fid,
        lev: '2',

      }).then(res => {
          if (res.code == 405) {
                sessionStorage.removeItem("token");
                this.$router.push("/login");
            } else {
                that.goodstypearr = res.data
            }
    });
    if(this.$route.query.state == true){
        this.state = true
        goodsget({},this.$route.query.id).then(res => {
            console.log(res)
            if (res.code == 405) {
                sessionStorage.removeItem("token");
                this.$router.push("/login");
            } else {
                this.goodsid = res.data.id
                this.ruleForm.type = res.data.type
                this.ruleForm.brand = res.data.brand
                this.ruleForm.model = res.data.model
                this.ruleForm.name = res.data.name
                this.ruleForm.iconUrl = res.data.iconUrl
                this.ruleForm.orgPrice = res.data.orgPrice/100
                this.ruleForm.rental = res.data.rental/100
                this.ruleForm.deposit = res.data.deposit/100
                this.ruleForm.stock = res.data.stock
                this.ruleForm.picUrlList = res.data.picUrlList
                let banner = res.data.picUrlList
                console.log(banner)
                console.log(banner.split(","))
                let strs= new Array(); //定义一数组 
                strs=banner.split(","); //字符分割 
                let arr = new Array();
                for(let i = 0;i<strs.length;i++){
                    if(strs[i] != ''){
                        arr.push({url:strs[i]})
                    }
                    
                }
                console.log(arr)
                this.fileList = arr

            }
        });
    }
 },


  methods: {
    pOutside(res, file){ // 照片
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.ruleForm.iconUrl = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    // 商品类型
    goodsType(val){
        let that = this
        goodsCategorylist({
            merchantId : that.userinfo.fid,
            lev: '3',
            pid:val
        }).then(res => {
            if (res.code == 405) {
                sessionStorage.removeItem("token");
                this.$router.push("/login");
            } else {
                that.brandarr = res.data
                that.ruleForm.brand = ''
                that.ruleForm.model = ''
            }
        });
    },
    // 获取商品型号
    goodsbrand(val){
        console.log(val)
        let that = this
         let obj = {};
            obj = this.brandarr.find((item)=>{//这里的goodstypearr就是上面遍历的数据源
            return item.name === val;//筛选出匹配数据
            });
            let id  = obj.id;
        goodsCategorylist({
            merchantId : that.userinfo.fid,
            lev: '4',
            pid:id
        }).then(res => {
            that.modelarr = res.data
            that.ruleForm.model = ''

        });
    },
  
    //提交
    basic(val){
        let that = this
        if(this.state == true){
             goodsupdate({
                merchantId : that.userinfo.fid,
                type: that.ruleForm.type,
                name: that.ruleForm.name,
                iconUrl: that.ruleForm.iconUrl,
                deposit: that.ruleForm.deposit*100,
                orgPrice: that.ruleForm.orgPrice*100,
                rental: that.ruleForm.rental*100,
                stock: that.ruleForm.stock,
                brand: that.ruleForm.brand,
                model: that.ruleForm.model,
                picUrlList:that.ruleForm.picUrlList
            },that.goodsid).then(res => {
                console.log(res)
                if(res.code == 200){
                    this.$message({
                        message: "商品修改成功",
                        type: "success"
                    });
                    this.$router.push({
                        path: "/goodsmanagement",
                    });
                    setTimeout(function(){that.$router.go(0)},500)
                }else{
                    this.$message.error(res.message);
                }
            });
        }else{
             goodssave({
            merchantId : that.userinfo.fid,
            type: that.ruleForm.type,
            name: that.ruleForm.name,
            iconUrl: that.ruleForm.iconUrl,
            deposit: that.ruleForm.deposit*100,
            orgPrice: that.ruleForm.orgPrice*100,
            rental: that.ruleForm.rental*100,
            stock: that.ruleForm.stock,
            brand: that.ruleForm.brand,
            model: that.ruleForm.model,
            picUrlList:that.ruleForm.picUrlList
        }).then(res => {
            console.log(res)
            if(res.code == 200){
                this.$message({
                    message: "商品录入成功",
                    type: "success"
                });
                this.$router.push({
                    path: "/goodsmanagement",
                });
                setTimeout(function(){that.$router.go(0)},500)
            }else{
                this.$message.error(res.message);
            }
        });
        }
       
    },
    
    
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    handlePreview(file) {
        console.log(file);
    },
    handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件`);
        // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
        // return this.$confirm(`确定移除 ${ file.name }？`);
    },
    slideshow(res, file){ // 轮播
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.ruleForm.picUrlList += res.data.filePath +','
      }else{
          this.$message.error(res.message);
          return false
      }
    },
   beforeUpload (file) {
        let _this = this
        const is1M = file.size / 1024 / 1024 < 2; // 限制小于1M
       
        if (!is1M) {
          _this.$message.error('图片大小不可超过2MB')
        }
        return is1M
      },
  }
}

</script>
<style lang='less' scoped>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.box{
    width: 100%;
    background: #fff;
}
.basicBox{
    width: 70%;
    text-align: center;
    margin: 0 auto;
    background: #fff;
}
.width100{
    width: 100%;
    text-align: left;
}
.width90{
    width: 95%;
}
.width20{
    width: 20%;
}


</style>
<style lang="less">
    .el-upload--text{
    width: 150px  !important;
    height: 50px !important;
    border: 0px !important;
}

</style>